<template>
  <div class="welcome">
  <div class="n">''</div>
    <!-- 搜索 -->
    <div class="select-home">
      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="search"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <i slot="prefix" class="el-icon-search"></i>

        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="txt">
      <div style="color: aliceblue" class="hello">您好！</div>
      <div style="color: aliceblue">欢迎使用航空发动辅助设计与评估系统</div>
      <div class="button-home">
        <el-button type="primary" round @click="ToSearch()">开始检索</el-button>
        <el-button
          type="info"
          round
          icon="el-icon-camera-solid"
          @click="ToAssess()"
          >评估</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ["Alabama", "Wisconsin", "Wyoming"],
    };
  },
  mounted() {
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    ToSearch() {
      this.$router.push("/search");
    },
    ToAssess() {
      this.$router.push("/assess");
    },
  },
};
</script> 

<style lang="less">
.welcome {
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-background.jpg");
  background-size: cover;
}
.hello {
  font-size: 55px;
}
.txt {
  margin-left: 20%;
  margin-top: 30%;
  font-size: 30px;
}
.select-home{
  margin-top: 0%;
  margin-left: 80%;
  width: 200px;
}
</style>
